<template>
  <div id="DishDetails">
    <div class="content">
      <div class="left">
        <div class="relative"><a> <img :src="menuSrc" alt=""></a></div>
        <div class="relative-info">
          <div class="cls"><h1 class="relative-title">{{ menuName }}</h1>
            <el-button class="collectBtn" @click="handlecollect">{{ collectText }}</el-button>
          </div>
          <div class="boot"><span class="bootti">精品</span></div>
          <div class="relative-num"><span>{{ Nums(doh) }}</span>浏览<span class="collectnum">{{ Nums(collection) }}</span>收藏
          </div>
          <router-link :to="{
                  name: 'CenterRecipes',
                  params: {
                    userId: menuUserId
                  }
                }">
            <div class="auther-info"><img :src="headImg" alt="">
              <div class="auther-nickname">{{ nickname }}</div>
            </div>
          </router-link>
          <a href="javascript:void(0);" class="gz" @click="handlefocus">{{ focusText }}</a>
        </div>
        <p class="intro"><br>{{ introduce }}
        </p>
        <div class="material"><h2 class="mini-title">{{ menuName }}的用料</h2>
          <table :data='ingredient' width="688px" v-if="ingredient.length !== 0">
            <thead>
            <tr>
              <th class="recipeName">食材名字</th>
              <th>具体用量</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="k in ingredient" :key="k.ingredientsId">
              <td class="tds">{{ k.ingredientsName }}</td>
              <td class="tds">{{ k.dosage }}</td>
            </tr>
            </tbody>
          </table>
          <div class="ingredient" v-else>作者没有提供用料</div>
        </div>
        <h2 class="mini-title">{{ menuName }}的做法</h2>
        <div class="ingredient" v-if="steps.length === 0">作者没有提供做法</div>
        <div v-else class="teps" v-for="(step, index) in steps" :key="step.stepId">
          <div class="stepcontent"><img :src="step.stepSrc" alt=""></div>
          <div class="step-info"><h3>步骤{{ index+1 }}</h3>
            <p>
              {{ step.stepContent }}
            </p></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import cookie from '../../cookien'

export default {
  name: 'DishDetails',
  data () {
    return {
      collect: false,
      focus: false,
      menuSrc: '',
      menuName: '',
      collection: '',
      nickname: '',
      headImg: '',
      introduce: '',
      doh: '',
      ingredient: [],
      steps: [],
      menu: this.$route.params.id,
      menuUserId: ''
    }
  },
  created () {
    this.getRecipeById().then(data => {
      // 判断关注
      if (this.$store.state.token !== undefined && this.$store.state.token !== '') {
        this.judgefocus()
      }
      // 判断收藏
      if (this.$store.state.token !== undefined && this.$store.state.token !== '') {
        this.judgecollect()
      }
    }).catch(err => {
      console.log(err.toString())
    })
  },
  computed: {
    Nums (value) {
      return (value) => {
        if (value >= 100000000) {
          value = Math.round(value / 10000000) / 10 + '亿'
        } else if (value >= 10000000) {
          value = Math.round(value / 1000000) / 10 + 'kw'
        } else if (value >= 10000) {
          value = Math.round(value / 1000) / 10 + 'w'
        } else if (value >= 1000) {
          value = Math.round(value / 100) / 10 + 'k'
        }
        return value
      }
    },
    collectText () {
      return this.collect ? '已收藏' : '收藏'
    },
    focusText () {
      return this.focus ? '已关注' : '关注'
    }
  },
  methods: {
    // 根据id查询食谱信息
    getRecipeById () {
      return new Promise((resolve, reject) => {
        this.$axios({
          method: 'post',
          url: '/Menu/Visitor/findMenuById',
          params: {
            menuId: this.menu
          }
        }).then(data => {
          // 菜谱作者id
          this.menuUserId = data.data.object.userId
          this.menuSrc = data.data.object.menuSrc
          this.menuName = data.data.object.menuName
          this.nickname = data.data.object.nickname
          this.collection = data.data.object.collection
          this.headImg = data.data.object.headImg
          this.introduce = data.data.object.introduce
          this.doh = data.data.object.doh
          this.ingredient = data.data.object1
          this.steps = data.data.object2
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 判断是否收藏
    judgecollect () {
      this.$axios({
        method: 'post',
        url: '/Menu/User/judgeOfCollection',
        params: {
          menuId: this.menu,
          menuType: 0,
          userId: this.$store.state.userMsg.userId
        }
      }).then(data => {
        console.log(data.data)
        if (data.data.code === 501) {
          this.$message(data.data.message)
        } else {
          if (data.data.message === '已经收藏') {
            this.collect = !this.collect
          } else {
            this.collect = false
          }
        }
      })
    },
    // 收藏功能
    handlecollect () {
      if (this.$store.state.token !== undefined && this.$store.state.token !== null && this.$store.state.token !== 'null') {
        this.$axios({
          method: 'post',
          url: '/Menu/User/collection',
          params: {
            menuId: this.menu,
            menuType: 0,
            userId: this.$store.state.userMsg.userId
          }
        }).then(data => {
          this.$message({
            message: data.data.message,
            offset: 400
          })
          if (this.collect) {
            this.collection--
          } else {
            this.collection++
          }
          this.collect = !this.collect
        })
      } else {
        this.$message('请先登录')
      }
    },
    // 判断是否关注
    judgefocus () {
      this.$axios({
        method: 'post',
        url: '/Menu/User/judgeOfAttention',
        params: {
          userOneId: this.$store.state.userMsg.userId,
          userTwoId: this.menuUserId
        }
      }).then(data => {
        console.log(data.data)
        if (data.data.code === 501) {
          this.$message(data.data.message)
        } else {
          if (data.data.message === '已经关注了') {
            this.focus = !this.focus
          } else {
            this.focus = false
          }
        }
      })
    },
    // 关注功能
    handlefocus () {
      if (this.$store.state.token !== undefined && this.$store.state.token !== null && this.$store.state.token !== 'null') {
        this.$axios({
          method: 'post',
          url: '/Menu/User/attention',
          params: {
            userOneId: this.$store.state.userMsg.userId,
            userTwoId: this.menuUserId
          }
        }).then(data => {
          this.$message({
            message: data.data.message,
            offset: 400
          })
          this.focus = !this.focus
        })
      } else {
        this.$message('请先登录')
      }
    }
    // 判断用户是否收藏
  }
}
</script>
<style lang="less" scoped>
.el-message{
  margin-top: 400px !important;
}
#DishDetails {
  margin-top: 60px;
  overflow: auto;
}
.ingredient{
  width: 100%;
  color: #ffb31a;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.cls {
  display: flex;
  justify-content: space-between;

  .collectBtn {
    background-color: #FFB31A;
    border: none;
    color: #fff;
    width: 85px;
  }
}

a {
  text-decoration: none;
  color: #333;
}

.recipeName {
  border-right: 1px solid #e5e5e5;
}

.tds {
  border-right: 1px solid #e5e5e5;
  text-align: center;
}

thead {
  height: 50px;
}

.content {
  width: 1000px;
  margin: 0 auto;
  margin-top: 30px;
  background-color: aquamarine;

  .left {
    width: 690px;
    float: left;

    .relative {
      display: block;
      width: 690px;
      height: 390px;
      overflow: hidden;
      border-radius: 8px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .relative-info {
      margin-top: 20px;
      padding: 9px 0 40px;
      text-align: left;

      .relative-title {
        font-size: 22px;
        color: #333;
        font-weight: bold;
        line-height: 24px;
      }

      .boot {
        margin-top: 10px;
        font-size: 0;

        span {
          display: inline-block;
          margin-right: 16px;
          font-size: 14px;
          color: #fff;
          text-align: center;
          width: 42px;
          box-sizing: border-box;
          height: 22px;
          line-height: 22px;
          border-radius: 2px;
          background: #FFB31A;
        }
      }

      .relative-num {
        font-size: 13px;
        color: #333;
        margin-top: 20px;

        span {
          font-size: 24px;
          color: #FFB31A;
          position: relative;
          top: 2px;
        }

        .collectnum {
          margin-left: 40px;
        }
      }

      .auther-info {
        font-size: 16px;
        color: #666;
        margin: 25px 0;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          float: left;

        }

        .auther-nickname {
          font-size: 16px;
          margin-left: 6px;
          position: relative;
          margin-right: 20px;
          font-size: 13px;
          color: #333;
          display: inline-block;
          line-height: 30px;
          vertical-align: middle;
        }
      }

      .gz {
        float: left;
        height: 30px;
        width: 73px;
        line-height: 28px;
        text-align: center;
        color: #333;
        border: 1px solid #333;
        border-radius: 4px;
        font-size: 12px;

        .addicon {
          font-size: 14px;
        }
      }
    }
  }
}

.intro {
  font-size: 15px;
  color: #333;
  line-height: 27px;
}

.material {
  padding-bottom: 40px;

  table {
    border-radius: 5px;
    margin-left: 1px;
    color: #999;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: hidden;
    width: 688px;

    tr {
      background: #F1F7FA;
      color: #333;

      td {
        border-top: 1px solid #e5e5e5;
        padding: 16px 0;
        width: 344px;
      }
    }
  }
}

// .teps{
//     padding-bottom: 40px;
//     .mini-title{
//         font-size: 18px;
//         color: #333;
//         line-height: 18px;
//         font-weight: bold;
//         margin: 30px 0 20px;
//     }
//     .stepcontent{
//         margin: 25px 0 40px;
//         a{
//             float: left;
//             img{
//                 width: 200px;
//                 height: 200px;
//             }
//         }
//     }
// }
// .step-info{
//     float: left;
//     padding: 0;
//      width: 480px;
//      word-wrap: break-word;
//     margin-left: 10px;
//     font-size: 15px;
//     color: #333;
//     line-height: 27px;
//      overflow: hidden;
//      p{
//         font-weight: bold;
//      }
// }
.teps {
  width: 720px;
  // background-color: yellow;
  display: flex;
  justify-content: start;
  margin-top: 20px;
  margin-bottom: 10px;

  .stepcontent {
    img {
      width: 200px;
      height: 200px;
      background-color: #FFB31A;
      border-radius: 8px;
    }
  }

  .step-info {
    height: 200px;
    border-color: aqua;
    width: 448px;
    margin-left: 15px;
    font-size: 15px;

    p {
      display: block;
      margin-top: 10px;
      line-height: 20px;
    }
  }
}

.mini-title {
  font-size: 18px;
  color: #333;
  line-height: 18px;
  font-weight: bold;
  margin: 30px 0 20px;
}
</style>
